<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->

<script setup>
import {downloadFileAPI} from '/src/api/common.js'
import {ref, computed} from "vue"
import {
  downloadFileWithBuffer,
  getFileIconWithSuffix,
  fileSize,
  canPreviewFile,
  wkPreviewFile
} from '/src/utils/index.js'
import {ElMessageBox} from 'element-plus'
import {ElMessage} from 'element-plus'

const emits = defineEmits(['delete'])

defineOptions({
  name: 'WkFileCell',
})

const props = defineProps({
  index: Number,
  data: Object,
  // 完整数据
  list: Array,
  showFoot: {
    type: Boolean,
    default: true
  },
  cursorPointer: {
    type: Boolean,
    default: false
  },
  previewShow: {
    type: Boolean,
    default: true
  },
  deleteShow: {
    type: Boolean,
    default: false
  }
})

const fileName = computed(() => {
  if (props.data) {
    return props.data.name || props.data.fileName
  }
  return ''
})

const fileIcon = computed(() => {
  const temps = fileName.value ? fileName.value.split('.') : []
  var ext = ''
  if (temps.length > 0) {
    ext = temps[temps.length - 1]
  } else {
    ext = ''
  }
  return getFileIconWithSuffix(ext)
})

/**
 * 下载
 */
function downloadClick() {
  downloadFileAPI(props.data.url).then(res => {
    const blob = new Blob([res.data], {
      type: ''
    })
    downloadFileWithBuffer(blob, props.data.name)
  }).catch(() => {
  })
}

/**
 * 附件预览
 */
function previewClick() {
  if (canPreviewFile(fileName.value)) {
    wkPreviewFile(props.data.url, fileName.value)
  } else {
    this.$wkPreviewFile.preview({
      index: props.index || 0,
      data: props.list.map(function (item) {
        return {
          url: item.url,
          name: item.name
        }
      })
    })
  }
}


/**
 * 删除
 */
function deleteClick() {
  ElMessageBox.confirm({
        message: '确定删除?',
        title: '提示',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    emits('delete', props.data, props.index)
  }).catch(() => {
    ElMessage.info({message: '已取消操作'})
  })
}

</script>


<template>
  <flexbox class="wk-file-cell">
    <img :src="fileIcon" class="wk-file-cell__header" alt>
    <div :class="{'cursor-pointer' :cursorPointer}" class="wk-file-cell__body text-one-line">
      {{ fileName.length > 20 ? fileName.substring(0, 20) + '...' : fileName }}
    </div>
    <div class="wk-file-cell__size">
      ({{ fileSize(data.size) }})
    </div>
    <div class="wk-file-cell__footer">
      <template>
        <span v-if="previewShow" class="xr-text-btn primary" @click="previewClick">预览</span>
        <span class="xr-text-btn primary" @click="downloadClick">下载</span>
        <span v-if="deleteShow" class="xr-text-btn delete" @click="deleteClick">删除</span>
      </template>
    </div>
  </flexbox>
</template>

<style lang="scss" scoped>
.wk-file-cell {
  height: 38px;
  padding: 8px;
  background-color: #f8faff;
  border-radius: $xr-border-radius-base;
  position: relative;
  margin-bottom: 5px;
  line-height: 20px;

  &__header {
    display: block;
    width: 16px;
  }

  &__body {
    margin-left: 12px;
    color: $xr-color-primary;
    font-size: 14px;
  }

  &__size {
    margin-left: 8px;
    flex-shrink: 0;
    font-size: 12px;
    color: #ccc;
  }

  &__footer {
    display: none;
    margin-left: 15px;
    flex-shrink: 0;
    margin-right: 8px;
    cursor: pointer;

    i {
      color: #ccc;
      padding: 0 2px;
    }
  }

  &:hover {
    .wk-file-cell__footer {
      display: block;
    }
  }
}

.cursor-pointer {
  cursor: pointer;
}
</style>
